<!--
 * @Author: your name
 * @Date: 2021-07-06 20:38:47
 * @LastEditTime: 2021-07-06 22:12:19
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue_shop_mananger\src\components\users\components\uEditDialog\uEditDialog.vue
-->
<template>
  <div class="uEditDialog">
     <!-- 头部 -->
    <el-dialog title="修改用户" :visible.sync="editDialogVisible" width="50%" @close="editDialogClosed" >
      <!-- 内容区 -->
      <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
        <el-form-item label="用户名" prop="username" >
          <el-input v-model="editForm.username" :disabled="true"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="editForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="editForm.mobile"></el-input>
        </el-form-item>
      </el-form>
      <!-- 底部 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUser">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
export default{
  data() {
    //自定义校验规则:邮箱
      var checkEmail=(rules,value,fn)=>{
        const regEmail=/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
        if(regEmail.test(value)){
          //合法邮箱
          return fn();
        }
        fn(new Error('请输入正确邮箱！'))
      };
      //自定义校验规则:电话
      var checkMobile=(rules,value,fn)=>{
        const regMobile=/1[3|5|7|8|]\d{9}/
        if(regMobile.test(value)){
          //合法电话
          return fn();
        }
        fn(new Error('请输入正确电话号码！'))
      };
    return {
      editDialogVisible:false,
      editForm:{
          username:'',
          email:'',
          mobile:''
        },
        editFormRules:{
          username:[
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
          ],
          email:[
            { required: true, message: '请输入邮箱', trigger: 'blur' },
            { validator: checkEmail, trigger: 'blur' }
          ],
          mobile:[
            { required: true, message: '请输入电话', trigger: 'blur' },
            { validator: checkMobile, trigger: 'blur' }
          ],
        },
    }
  },
  methods: {
    editDialogClosed(){
      this.$refs.editFormRef.resetFields();
    },
    editUser(){
      this.$refs.editFormRef.validate(async (vaild)=>{
          if(!vaild)return;
          const{data:res}=await this.$http.put('users/'+this.editForm.id,{
            email:this.editForm.email,
            mobile:this.editForm.mobile
          })
          if (res.meta.status!==200) {
            console.log(res);
            return this.$message.error('更新用户失败！')
          }
          this.$message.success('修改用户成功！')
          this.dialogVisible=false;
          this.$emit('resetUserEmit')
        })
        this.editDialogVisible=false
    }
  },
  mounted(){
    this.$bus.$on('showEditDialog',async (id)=>{
      const {data:res}=await this.$http.get('users/' + id)
      if(res.meta.status !==200)return this.$message.error('查询用户失败');
      this.editForm=res.data;
      this.editDialogVisible=true
    })
  }

}
</script>
<style lang="scss" scoped>

</style>